<script>
import { mapGetters } from 'vuex'

import KCard from '@/components/KCard'

import { getInfo } from '@/api/v2/user'
import dayjs from 'dayjs'
import { atLeast, isNumber } from '@/utils/kris_utils'
import {handleFiledByID} from '@/utils/handleData'
export default {
    components: {
        KCard
    },
    props: {
    },
    data() {
        return {
            loading:false,
            data:null,
        }
    },
    computed:{
        ...mapGetters(['defaultCompany','company']),
        currentCompanyRoles(){
            const allRoles = this.data?.role,
                  currentCompany = this.defaultCompany

            if(!Array.isArray(allRoles) || allRoles.length <= 0)
                return []

            if(
                !atLeast(currentCompany,['id']) ||
                !isNumber(currentCompany['id']) || 
                isNaN(currentCompany['id'])
            )
                return []


            const currentCompanyRoles = allRoles
            .filter(role => {
                if(
                    !atLeast(role,['company_id']) ||
                    !isNumber(role['company_id']) ||
                    isNaN(role['company_id'])
                )
                return false

                return role['company_id'] === currentCompany['id']
            })
            .map(role => {
                const { model_id,role:{label_name,id} } = role
                return {
                    label:label_name,
                    value:model_id,
                    roleID:id
                }
            })
            
            return currentCompanyRoles
        },
        profile(){
            if(this.data === null)return null

            // const { avatar,username,userCompany:{department,position,entry_at} } = this.data
            const { avatar,username,fieldData,role } = this.data
            let subTitle = undefined

            const entryData=handleFiledByID(fieldData,'content','entry_at')
            if(entryData){
                let ts = dayjs(entryData).toDate().getTime(),
                    cts = new Date().getTime(),
                    res = cts - ts,
                    day = Math.floor(res / 1000 / 60 / 60 / 24) || null
                
                if(typeof day === 'number')
                    subTitle = `入职(${day}天)`
            }
            return {
                avatar,
                name:username,
                subTitle,
                describe:[
                    {
                        key:'dapartment',
                        label:'部门',
                        value:handleFiledByID(fieldData,'valueType','department_id')?.name
                    },
                    {
                        key:'position',
                        label:'岗位',
                        value:handleFiledByID(fieldData,'valueType','position_id')?.name
                    },
                    {
                        key:'roles',
                        label:'角色',
                        value:role.map(item=>item?.role?.label_name).join('、')
                    }
                ]
            }
        }
    },
    methods:{
        async getUserInfo(){
            let result = await getInfo()
                .catch(err => {
                    throw new Error(err?.response?.data?.message ?? '获取信息失败')
                })

            if(result.code !== 200)
                throw new Error(result.message ?? '获取信息失败')

            console.log(result)
            this.data = result.data
        }
    },
    created(){
        this.getUserInfo()
    }
}
</script>

<template>
    <KCard
        bodyClasses="profile"
        v-loading="loading"
    >
        <img v-if="profile" class="avatar" :src="profile.avatar" />
        <div v-if="profile" class="info">
            <div class="header">
                <span class="name">{{ profile.name }}</span>
                <span v-if="profile.subTitle" class="sub-title">{{ profile.subTitle }}</span>
            </div>
            <div class="body">
                <div class="item" v-for="item in profile.describe" :key="item.key">
                    <span>{{ item.label }}：</span>
                    <span>{{ item.value }}</span>
                </div>
            </div>
        </div>
    </KCard>
</template>

<style lang="scss">
.profile {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;

    >.avatar {
        border-radius: 50%;
        width: 99px;
        height: 99px;
        object-fit: cover;
        margin: 4px 0;
        margin-right: 24px;
    }

    >.info {
        >.header {
            padding-top: 14px;

            >.name {
                font-size: 20px;
                font-weight: bold;
                color: #3D3D3D;
            }

            >.sub-title {
                margin-left: 10px;
                color: #8E8E8E;
                font-size: 14px;
            }
        }

        >.body {
            >.item {
                color: #3D3D3D;
                font-size: 14px;
                margin-top: 10px;
            }
        }
    }
}
</style>